<template>
  <div class=" flex" v-if="store.token && (commentId === saveId)">
    <div class="flex-1">
      <div>
        <van-cell-group inset>
          <van-field v-model="message" rows="2" autosize type="textarea" maxlength="140"
                     placeholder="请输入回复信息" show-word-limit/>
        </van-cell-group>
      </div>
      <div class="flex flex-row-reverse mr-4 mt-2">
        <YuButton
            @click="sendReply()"
        >
          回复
        </YuButton>
      </div>
    </div>
  </div>
</template>

<script setup>
import YuButton from '@/components/YuButton/index.vue'
import {sendOrDelComment} from "@/api/review/index";
import {useStore} from "@/store/index";

import {toRefs, reactive} from "vue";
import {Toast} from "vant";


const store = useStore()
const data = reactive({
  message: ''// 发送的信息
})
const { message } = toRefs(data)
const $emit = defineEmits(['setSaveIdNull'])
// 回复
// 可以发送删除回复评论 params = {
// t: 1 发送 2 回复 0 删除， type: 用来判断是0：歌曲还是2：歌单还是其他的,
// id: 对应资源id, content: 要发送的内容， 如果如果要是删除的话这个id是不需要的，
// commentId: 回复评论的id，也是删除的id
// 发送动态不需要id但是需要threadId
// }
const sendReply = async () => {
  if (data.message) {
    let params = {t: 2, type: 2, content: data.message, commentId: props.saveId, id: props.id}
    const currentType = {
      // resourceType: 0 歌单
      0: () => {
        // 设置歌曲的type
        params.type = 2
      },
      // resourceType: 4 歌曲
      4: () => {
        // 设置歌单的type
        params.type = 0
      },
      // resourceType: 2 动态
      2: () => {
        // 设置动态的type
        params.type = 6
        params.threadId = props.threadId
      },
      3: () => {
        // 设置专辑
        params.type = 3
      },
      14: () => {
        // 设置专辑
        params.type = 4
      }
    }
    currentType && currentType[props.resourceType] && currentType[props.resourceType]()
    // 发送回复
    sendOrDelComment(params).then(res => {
      if (res.code === 200) Toast('回复成功')
    })
    // 清空回复内容
    data.message = ''
    $emit('setSaveIdNull', null)
  } else {
    Toast('请填写信息')
  }
}

const props = defineProps({
  saveId: null, // 保存的显示回复框的id
  resourceType: Number,
  id: Number,
  threadId: String, // 发送动态不需要id但是需要threadId
  commentId: Number
})
</script>

<style scoped>

</style>
